import { useEffect, useState } from "react";
import "./App.scss";
import dayjs from "dayjs";
import MyCard from "./components/myCard";
import { CapsuleChart, ScrollBoard } from "@jiaminghi/data-view-react";
import { config1, config2, config3, config4 } from "./data/config";
import EChartsReact from "echarts-for-react";
import { options1 } from "./data/options";
import { options2 } from "./data/options2";
import { options3 } from "./data/options3";
import { options4 } from "./data/options4";
import { ScaleViewContainer } from "react-scale-view";
const App = () => {
  const [date, setDate] = useState(
    dayjs().format("YYYY年MM月DD日HH时mm分ss秒")
  );

  useEffect(() => {
    const timer = setInterval(() => {
      setDate(dayjs().format("YYYY年MM月DD日HH时mm分ss秒"));
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);


  return (
    <div id="screen">
      <div className="app" >
        <header className="app_header">
          <h2>大屏数据可视化系统</h2>
          <span>{date}</span>
        </header>
        <main className="main">
          <div className="left">
            <MyCard>
              <CapsuleChart
                config={config1}
                style={{ width: "100%", height: 200 }}
              />
            </MyCard>
            <MyCard>
              <ScrollBoard
                config={config2}
                style={{ width: "100%", height: 200 }}
              />
            </MyCard>
            <MyCard>
              <EChartsReact
                option={options1}
                style={{ width: "100%", height: 200 }}
              ></EChartsReact>
            </MyCard>
          </div>
          <div className="mid">
            <div>
              <EChartsReact
                option={options3}
                style={{ width: "100%", height: 200 }}
              ></EChartsReact>
            </div>
            <div style={{ height: 400 }}>
              <EChartsReact
                option={options4}
                style={{ width: "100%", height: "100%" }}
              ></EChartsReact>
            </div>
          </div>
          <div className="right">
            <MyCard>
              <div className="three">
                <ScrollBoard
                  config={config3}
                  style={{ width: "100%", height: 200 }}
                />
              </div>
            </MyCard>
            <MyCard>
              <ScrollBoard
                config={config4}
                style={{ width: "100%", height: 200 }}
              />
            </MyCard>
            <MyCard>
              <EChartsReact
                option={options2}
                style={{ width: "100%", height: 200 }}
              ></EChartsReact>
            </MyCard>
          </div>
        </main>
      </div>
    </div>
  );
};

export default App;
